<%--
  Created by IntelliJ IDEA.
  User: Adger
  Date: 2020/7/29
  Time: 22:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写博客</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/icon.icon" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/progressbuttonstyles/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/progressbuttonstyles/component.css">
    <script src="${pageContext.request.contextPath}/static/progressbuttonstyles/modernizr.custom.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/edit.md/editormd.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/jquery.min3.5.js"></script>
    <script src="${pageContext.request.contextPath}/static/edit.md/editormd.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/progressbuttonstyles/classie.js"></script>
    <script src="${pageContext.request.contextPath}/static/progressbuttonstyles/progressButton.js"></script>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        #footer{
            position: relative;
            border-radius: 10px;
            width: 100%;
            height: 56px;
            margin-top: -13px;
        }
        .myarticle{
            font-weight: 500;
            line-height: 56px;
            font-size: 30px;
            letter-spacing: 5px;
        }
        .myarticleTitle{
            position: absolute;
            outline: none;
            width: 900px;
            height: 40px;
            border-radius: 3px;
            top: 7px;
            left: 16%;
            text-indent: 8px;
            font-size: 20px;
            font-weight: 500;
        }
        .anniu{
            position: absolute;
            display: inline-block;
            right: 0;
        }
    </style>
</head>
<body>
<div id="layout">
    <div id="test-editormd">
    <textarea style="display:none;">
    </textarea>
    </div>
</div>
<footer id="footer">
    <div>
        <span class="myarticle">请输入文章标题</span>&nbsp;&nbsp;
        <input type="text" placeholder="请输入文章标题" class="myarticleTitle">
        <div class="anniu">
            <button class="progress-button" data-style="top-line" data-horizontal>保存草稿</button>
            <button class="progress-button" data-style="top-line" data-horizontal>发布文章</button>
        </div>
    </div>
</footer>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 670,
            syncScrolling: "single",
            path: "${pageContext.request.contextPath}/static/edit.md/lib/",
            toolbarIcons : function() {
                // Or return editormd.toolbarModes[name]; // full, simple, mini
                // Using "||" set icons align right.
                return ["undo", "redo", "|", "bold", "italic","quote","ucwords","uppercase","lowercase", "|","h1","h2","h3","h4","h5","h6","|","list-ul","list-ol", "hr", "|", "preview", "watch", "|", "fullscreen"]
            },
        });
    });
</script>
<script>
    [].slice.call( document.querySelectorAll( 'button.progress-button' ) ).forEach( function( bttn ) {
        new ProgressButton( bttn, {
            callback : function( instance ) {
                var progress = 0,
                    interval = setInterval( function() {
                        progress = Math.min( progress + Math.random() * 0.1, 1 );
                        instance._setProgress( progress );

                        if( progress === 1 ) {
                            instance._stop(1);
                            clearInterval( interval );
                        }
                    }, 200 );
            }
        } );
    } );
</script>
</body>
</html>